<template>
	<view>
		<view class="nav-title flex align-center justify-between py-2 px-2"
			style=" position: fixed; top: 0; z-index: 1111;height: 7vh;">
			<image @click="getBack()" class="back-img"
				:src="type?'../../static/images/back.png':'../../static/images/loading.gif'"></image>
			<view
				style="width: 150px;height: 60rpx;border: 1px solid	#DCDCDC;padding:0 5px;margin-left: auto;border-radius: 5px;display: flex;align-items: center;">
				<input class="edit-font w-max-100" style="color: black;flex: 1;" type="text" v-model="address_names"
					@confirm="chargingAddress_names()" placeholder="请输入地址" />
				<image style="width: 30rpx;height: 30rpx;" src="../../static/images/searc.png"
					@click="chargingAddress_names()"></image>

			</view>
			<view style="color:#05BD03;font-size: 25rpx;font-weight: 600;margin-left: 5px;"
				v-if="address_names.length>0" @click="noSearch()">取消</view>
		</view>
	
		<map v-if="longitude != '' && latitude != ''" :longitude="longitude" :latitude="latitude" :markers="mapList"
			max-scale="20" @markertap="location" :scale="20" show-scale="true" width="1">
			<view class="top-detail" v-if="is_type&&searchList.length==0&&locationObj!=null">
				<view style="color: #0e0e0e;font-size: 32rpx;font-weight: bold;">{{locationObj.operator_code}}</view>
				<view><text>品牌：</text><text>{{locationObj.name}}</text></view>
				<view class="text-ellipsis" style="white-space: normal;">
					{{locationObj.province+locationObj.citys+locationObj.area+locationObj.community+locationObj.street+locationObj.village+locationObj.address}}
				</view>
			</view>
			<view class="search-list" v-if="searchList.length>0">
				<view v-for="item of searchList" style="border-bottom: 1px solid #DCDCDC;padding: 10px 5px;"
					@click="chargePileList(item)">
					<view style="font-size: 30rpx;color: #282828;line-height: 40px;">{{item.address}}</view>
					<view style="font-size: 20rpx;color: #676767;line-height: 20px;white-space: normal;">{{item.address_name}}</view>
				</view> 
			</view>
			<cover-view v-if="is_type" class="map-button" @click="getLocation">{{locationObj.device_number}}
			</cover-view>
			<cover-view v-if="is_install_type" class="map-button" @click="getLocation">{{locationObj.name}}</cover-view>
		</map> 

	</view>
</template>

<script>
	import {
		postChargePileList,
		postChargePileDetail,
		postLst,
		chargingAddress,
		chargePileList
	} from "../../api/home.js";
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		data() {
			return {
				address_names: "",
				latitude: "",
				longitude: "",
				address: "", //输入的位置信息
				type: true,
				arrOne: [], // 正常使用的充电桩
				arrTwo: [], // 待安装的充电桩
				searchList: [],
				mapList: [], //合并后的数据
				is_type: false, // 是否选中位置
				is_install_type: false, // 是否安装选中位置 
				locationObj: {} // 选中的位置信息
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})

			// #ifdef H5
			// this.getConfig();
			// this.getUserlocation()
			// this.getConcatMap([]);
			// #endif
			this.init();
		},
		methods: {
			async noSearch() {
				this.address_names = "";
				this.searchList = []
			},
			async chargePileList(item) {

				const that = this;
				let address = item.address;
				let data = new Object();
				data.address_name = address;
				let res = await chargePileList(data);
				uni.hideLoading()
				if (res.data.code == 1) {
					console.log(res);
					console.log(res.data);
					if (res.data.data.length > 0) {
						let addressInfo = res.data.data[0]
						that.latitude = addressInfo.latitude;
						that.longitude = addressInfo.longitude
						that.initFunction()
					}

				} else {
					uni.showToast({
						title: "未查询到结果",
						icon: 'none'
					})
				}
			},
			async chargingAddress_names() {
				uni.showLoading({
					title: ""
				})
				this.is_type = false;
				this.locationObj = {};
				let data = new Object();
				data.address_names = this.address_names;
				let res = await chargingAddress(data);
				console.log(res);
				console.log(res.data);
				uni.hideLoading()
				if (res.data.code == 1) {

					let searchList = res.data.data;
					if (searchList.length != 0) {
						this.searchList = searchList;
					} else {
						uni.showToast({
							title: "未查询到结果",
							icon: 'none'
						})
					}
					console.log(this.searchList);
				} else {
					uni.showToast({
						title: "未查询到结果",
						icon: 'none'
					})
				}
			},


			async init() {
				this.getUserlocation()
				this.getConcatMap([]);
			},
			async initFunction(type) {
				this.address_names = "";
				this.searchList = []
				var res = await postChargePileList()
				if (res.data.code == 1) {
					var content = res.data.data;
					content.forEach(item => {
						item.iconPath = "../../static/images/cdz-nav1.png";
						item.title = `${item.operator_code}-${item.name}`;
						item.width="30";
						item.height="30";
					})
					if(type=="userLocation"){
						content.unshift({
							latitude: this.latitude,
							longitude: this.longitude,
							width:"25",
							height:"25",
							iconPath: "../../static/images/location.png"
						})
					}
					this.arrOne = content
					this.getConcatMap(content)
				}
			},
			async getConcatMap(content) {
				let data = new Object();

				data.uid = uni.getStorageSync('uid');

				let res = await postLst(data);
				uni.hideLoading()
				if (res.data.code == 1) {
					let list = res.data.data;
					list.forEach(item => {
						//用来区分是正常和安装
						item.id = Number(item.id) + 0.55
						item.iconPath = "../../static/images/cdz-nav1.png";
						item.width="30";
						item.height="30";
					})
					content = content.concat(list);
					this.arrTwo = list;
					this.mapList = content;
				}
			},
			// 获取经纬度
			getUserlocation: function() {
				console.log("getUserlocation");
				const that = this;
				uni.getLocation({
					type: 'gcj02 ',
					isHighAccuracy: true,
					success: function(res) {
						console.log(res);
						that.latitude = res.latitude;
						that.longitude = res.longitude
					},complete() {
						that.initFunction("userLocation") 
					},
				});
			},
			// 点击标记点
			location(e) {
				console.log(e)
				var id = e.detail.markerId;
				if (String(id).indexOf('.') != -1) {
					//待安装的充电桩
					this.is_install_type = true;
					this.is_type = false;
					this.arrTwo.forEach(item => {
						if (item.id == id) {
							item.scale = 20;
							this.locationObj = item
						}
					})
				} else {
					this.locationDetail(id);
					this.is_type = true;
					this.is_install_type = false;
					this.arrOne.forEach(item => {
						if (id == item.id) {
							item.scale = 20
							// this.locationObj = item
							// console.log(item)
						}
					})
				}
			},

			// 位置详细信息
			async locationDetail(id) {
				var data = {
					id: id
				}
				var res = await postChargePileDetail(data)
				if (res.data.code == 1){
					this.locationObj = res.data.data
				} 
				console.log(res.data.data!=null&&res.data.code == 1) 
				console.log(this.locationObj)
			}, 
			// 到这去
			getLocation() {
				console.log(this.locationObj)
				// this.$wx.openLocation(this.locationObj)
				uni.openLocation({
							name:this.locationObj.name,
							address:this.locationObj.address,
							latitude: this.locationObj.latitude,
							longitude: this.locationObj.longitude,
							success: function () {
								console.log('success');
							}
						});
			},
			getConfig() {
				var data = {
					url: encodeURIComponent(location.href.split('#')[0])
				}
				wechatConfig(data).then(res => {
					//alert("getConfig"+JSON.stringify(res));
					this.initJsdk(res.data.data)
				})
			},
			initJsdk(config) {
				////alert("initJsdk");  
				this.$wx.config({
					debug: false, // 开启调试模式
					appId: config.appId, // 必填，公众号的唯一标识
					timestamp: config.timestamp, // 必填，生成签名的时间戳
					nonceStr: config.nonceStr, // 必填，生成签名的随机串
					signature: config.signature, // 必填，签名，见附录1
					jsApiList: config.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				})
				this.$wx.ready(function() {
					this.$wx.checkJsApi({
						jsApiList: ['openLocation'],
					})
				})
				this.$wx.error(function(res) {});

			},

			getBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onUnload() {
			window.opener = null;
			window.open('', '_self');
			window.close();
		}
	}
</script>

<style>
	map {
		width: 100vw;
		height: 100vh;
	}

	.top-detail {
		margin-top: 7vh;
		width: 100%;
		min-height: 180rpx;
		max-height: 250rpx;
		background-color: #fff;
		position: fixed;
		border-radius: 0 0 10rpx 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #6b6b6b;
		line-height: 40rpx;
		font-weight: 500;
	}

	.map-button {
		width: 80%;
		height: 80rpx;
		text-align: center;
		background-color: #04BE02;
		line-height: 80rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #fff;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-title {
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.back-img {
		width: 45rpx;
		height: 45rpx;
	}

	.search-list {
		margin-top: 85rpx;
		width: 100%;
		height: 80%;
		overflow-y: scroll;
		background-color: #fff;
		position: fixed;
		padding: 20rpx;
		box-sizing: border-box;
		color: #6b6b6b;
		line-height: 40rpx;
		font-weight: 500;
		z-index: 100;
	}
</style>
